<!--
 * @Author: your name
 * @Date: 2021-07-23 14:11:28
 * @LastEditTime: 2021-07-26 18:38:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /sports-wechat/activity/matchInfo/components/nextStep.vue
-->
<template>
  <view class="box-wrap">
    <view class="btn-wrap">
      <view :class="['btn', beginFlag ? 'begin' : '']" @click="$emit('goNext')">{{active >= list.length - 1 ? '结束比赛' : '开始下一轮'}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    props: ['beginFlag', 'list', 'active']
  }
</script>

<style lang="scss" scoped>
.box-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  padding-right:20rpx;
  box-sizing: border-box;
  width: 100%;
  background: #fff;
  z-index: 5;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .btn-wrap {
    width: 100%;
    height: 108rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 243rpx;
      height: 78rpx;
      border-radius: 39rpx;
      color: #fff;
      font-size: 32rpx;
      background: #ccc;
    }
    .begin {
      background: #2E87FF;
    }
  }
}
</style>